//index.js
//获取应用实例
const assets = require('../../utils/assets.js');
const util = require('../../utils/util.js');
const app = getApp();
const emojiStack = [];

Page({
  data: {
	faceAssets: [],
	eyeAssets: [],
	mouthAssets: [],
	accessoryAssets: [],
	canvasContent:{
		face:assets.faceAssets[0],
		leftEye:assets.eyeAssets[0],
		rightEye:assets.eyeAssets[0],
		mouth:assets.mouthAssets[0],
		accessory:[]
	},
	currentAssets:"face",
  },
  onShareAppMessage: function (res) {
    return {
      title: '设计自己独一无二的emoji吧',
      path: 'pages/index/index'
    }
  },
  onLoad: function () {
  	this.context = wx.createCanvasContext('myCanvas');
  	let that = this;
  	//console.log(assets);
  	that.setData({
  		faceAssets: assets.faceAssets,
  		eyeAssets: assets.eyeAssets,
  		mouthAssets: assets.mouthAssets,
  		accessoryAssets: assets.accessoryAssets,
  	});
  	that.rendCanvas();
    wx.showShareMenu({})
  },
  switchAssets: function (event) {
  	let that = this;
  	that.setData({currentAssets:event.currentTarget.dataset.name});
  },
  chooseFace: function (event) {
  	let that = this;
  	//console.log(event);
  	let item = event.currentTarget.dataset.item;
  	that.data.canvasContent.face = item;
  	this.rendCanvas();
  },
  chooseEye: function (event) {
  	let that = this;
  	let item = event.currentTarget.dataset.item;
  	that.data.canvasContent.leftEye = item;
  	that.data.canvasContent.rightEye = item;
  	this.rendCanvas();
  },
  chooseRightEye: function (event) {
  	let that = this;
  	let item = event.currentTarget.dataset.item;
  	that.data.canvasContent.rightEye = item;
  	this.rendCanvas();
  },
  chooseMouth: function (event) {
  	let that = this;
  	let item = event.currentTarget.dataset.item;
  	that.data.canvasContent.mouth = item;
  	this.rendCanvas();
  },
  addAccessory: function (event) {
  	let that = this;
  	let item = event.currentTarget.dataset.item;
  	that.data.canvasContent.accessory.push(item);
  	this.rendCanvas();
  },
  rendCanvas: function(skip){
  	let that = this;
    if(!skip){
      emojiStack.push(JSON.stringify(that.data.canvasContent));
      console.log(emojiStack);
    }
  	let face = "../../assets/"+that.data.canvasContent.face.name+".png";
  	let leftEye = "../../assets/"+that.data.canvasContent.leftEye.name+".png";
  	let rightEye = "../../assets/right/"+that.data.canvasContent.rightEye.name+".png";
  	let mouth = "../../assets/"+that.data.canvasContent.mouth.name+".png";
  	that.context.drawImage(face, 0, 0, 300, 300);
  	that.context.drawImage(leftEye, 0, 0, 300, 300);
  	//right eye
  	that.context.drawImage(rightEye, 0, 0, 300, 300);
  	that.context.drawImage(mouth, 0, 0, 300, 300);
  	for (let i = 0; i < that.data.canvasContent.accessory.length; i++) {
  		let image = "../../assets/"+that.data.canvasContent.accessory[i].name+".png";
  		that.context.drawImage(image, 0, 0, 300, 300);
  	}
    that.context.draw();
  },	
  clearCanvas: function(){
  	let that = this;
  	that.setData({
  		canvasContent:{
		face:assets.faceAssets[0],
		leftEye:assets.eyeAssets[0],
		rightEye:assets.eyeAssets[0],
		mouth:assets.mouthAssets[0],
		accessory:[]
		}
  	});
    emojiStack.splice(0,emojiStack.length);
	  that.context.draw();
  },
  backward: function(){
    let that = this;
    //console.log(emojiStack);
    if(emojiStack.length>1){
      emojiStack.pop();
      that.data.canvasContent = JSON.parse(emojiStack[emojiStack.length-1]);
      console.log(that.data.canvasContent);
      this.rendCanvas(true);
    }else{
      wx.showToast({title: '没啥可以撤回了',});
    }
  },
  exportCanvas: function(){
  	let that = this;
    wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        canvasId: 'myCanvas',
        success: function (res) {
            util.savePicToAlbum(res.tempFilePath);
        }
    })
  }
})
